<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>五子棋对战 - 游戏大厅</title>
  <link rel="stylesheet" href="/css/game_hall.css">
</head>

<body>
  <!-- 导航栏 -->
  <div class="navbar">
    <div class="navbar-text">五子棋游戏大厅</div>
  </div>

  <!-- 主体内容 -->
  <div class="hall-container">
    <div class="user-info">
      <h3>欢迎回来，用户A！</h3>
      <p>积分: 5</p>
      <p>总场: 10 </p>
      <p> 胜场| : 3</p>

    </div>
    <div class="match-button">
      <button class="btn-match">开始匹配</button>
    </div>
  </div>

  <!-- <script src="/js/jquery.min.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="/js/common.js"></script>


  <script>
    function getUserInfo() {
      // console.log('获取用户信息');
      // var user_token = localStorage.getItem('user_token');
      // console.log('token:' + user_token);
      $.ajax({
        url: '/user/getUserInfo',
        method: 'GET',
        success: function (res) {
          console.log(res);
          if (res.code == 200 && res.data != null) {
            $('.user-info h3').text('欢迎回来，' + res.data.username + '！');
            $('.user-info p:nth-child(2)').text('积分: ' + res.data.score);
            $('.user-info p:nth-child(3)').text('总场: ' + res.data.totalCount);
            $('.user-info p:nth-child(4)').text('胜场: ' + res.data.winCount);

          }
        },
        error: function (err) {
          if (err.status == 401) {
            alert('请先登录');
            window.location.href = 'login.html';
          }
        }
      })
    }
    getUserInfo();

    //websocket的初始化，实现前端的匹配逻辑
    let websocket = new WebSocket("ws://127.0.0.1:8080/findMatch");
    console.log('websocket初始化完成！');
    websocket.onopen = function () {
      console.log("onopen");
    };
    websocket.onclose = function () {
      console.log("onclose");

    };
    websocket.onerror = function () {
      console.log("onerror");
    };
    //监听页面关闭事件，在页面关闭之前，手动关闭websocket连接
    websocket.onbeforeunload = function () {
      websocket.close();
    };


    //处理服务器返回的响应
    websocket.onmessage = function (event) {
      //处理服务器返回的响应数据，这个响应就是针对“开始匹配”/“结束匹配”来对应的
      //解析得到的响应对象，返回的数据是一个JSON字符串，解析成js对象
      console.log('游戏大厅中接收到响应：' + event.data);
      let response = JSON.parse(event.data);
      let matchButton = document.querySelector('.btn-match');
      if (!response.ok) {
        console.log('游戏大厅中接收到了失败响应！' + response.reason);
        return;
      }
      if (response.message == 'startMatch') {
        //开始匹配请求发送成功
        console.log('进入匹配队列成功！');
        matchButton.innerHTML = '匹配中...(点击停止)';
      } else if (response.message == 'stopMatch') {
        //结束匹配请求发送成功
        console.log('离开匹配队列成功！');
        matchButton.innerHTML = '开始匹配';
      } else if (response.message == 'matchSuccess') {
        console.log('匹配成功！进入游戏房间！');
        alert('匹配成功！进入游戏房间！');
        window.location.href = '/game_room.html';
      } else if (response.message == 'RepeatConnection') {
        alert('检测到重复的连接，请使用其他账户登录！');
        window.location.href = 'login.html';
      }
      else {
        console.log('游戏大厅中接收到未知响应！' + response.message);
      }

    };


    //给匹配按钮添加点击事件
    let matchButton = document.querySelector('.btn-match');
    matchButton.onclick = function () {
      console.log('点击匹配按钮！');
      //在触发websocket连接之前，先确认是否已经连接
      if (websocket.readyState == websocket.OPEN) {
        //如果当前readyState是OPEN，则说明已经连接，直接发送数据即可
        //这里发送数据有两种可能，开始匹配或停止匹配
        if (matchButton.innerHTML == '开始匹配') {
          console.log('开始匹配');
          websocket.send(JSON.stringify({
            message: 'startMatch',
          }));
        } else if (matchButton.innerHTML == '匹配中...(点击停止)') {
          console.log('停止匹配');
          websocket.send(JSON.stringify({
            message: 'stopMatch',
          }));
        }
      } else {
        //这说明当前连接处于异常状态
        alert("当前您连接已经断开！请重新登录!");
        // window.location.href = 'login.html';
      }

    };
  </script>
</body>

</html>